import '../css/main.css';
import '../css/fonts.css'
import '../css/base.css';
// import '../css/font.css';
require('!style-loader!css-loader!../css/font.css');
import img from '../img/Full-View.jpg';
//------------------- 常用变量-----------------
const textarea = document.querySelector('#textarea');
const optionCheckBox = document.querySelector(".option-checkbox");
const cssLeft = document.querySelector(".css-left");
//通用设置
const currencySet = document.querySelector(".set-currency");
//通用盒子是否被隐藏
const fontBox = document.querySelector(".font-box");
const fontDont = document.querySelector('#currency-dont');
//自定义
const gridStyle = document.querySelector('.set-grid-style');
//自定义控制的盒子是否隐藏
const gridStyleBox = document.querySelector('.gridstyle-box');
const gridfonts = document.querySelector('#gridfonts');
//栅元设置
const gridlilt = document.querySelector(".gridstyle-lile");
//栅元设置控制的盒子是否隐藏
const gridstylelite = document.querySelector(".gridstylelite");
//元素定位
const gridAttribute = document.querySelector('.gridstyle-attribute')
//元素定位控制的盒子
const gridAttBox = document.querySelector('.gridstyle-attribute-box')
//元素定位-i
const gridArrfont = document.querySelector("#gridarr-font");

const gridlileFonts = document.querySelector("#gridlile");
const gridNumbers = document.querySelector("#grid-numbers");
const gridAttributeNumbers = document.querySelector("#grid-attribute-numbers");
const optionClick = document.querySelector(".option-click");
const observation = document.querySelector(".observation-box");

let selectorFont = document.querySelector('.select-font')
let selectorGree = document.querySelector('.gree')
let selectorBlue = document.querySelector('.blue')
// 判断栅格等于元素数 等于就隐藏下面盒子
let selectorBox = document.querySelector('.gridrowcloumn')
selectorBox.style['display'] = 'none';
//-----------------------侧边栏---------------------
//获得css的样式值
/**
 * @param {*} doc target
 * @param {*} sty 目标样式
 * @param {*} judge 比较样式
 * @param {*} key 里面传入的值
 * @return {*} 
 */
function getStyle(doc, sty, judge, key) {
    let computed = document.defaultView.getComputedStyle(doc, null)[sty];
    computed === judge ? doc.style[sty] = key : doc.style[sty] = judge;
    return computed
}
//设置左侧的盒子是否隐藏
cssLeft.addEventListener('click', function (event) {
    let events = event.target;
    switch (events) {
        // 设置左侧边框的隐藏和显示
        case currencySet:
            let fontboxDisplay = getStyle(fontBox, 'display', 'none', 'block');
            fontboxDisplay === 'none' ? fontDont.innerHTML = '&#xe601' : fontDont.innerHTML = '&#xe743';
            break;
        // 自定义
        case gridStyle:
            let gridstyleDisplay = getStyle(gridStyleBox, 'display', 'none', 'block');
            gridstyleDisplay === 'none' ? gridfonts.innerHTML = '&#xe601' : gridfonts.innerHTML = '&#xe743';
            break;
        // 栅元设置
        case gridlilt:
            let gridStyleLiltDisplay = getStyle(gridstylelite, 'display', 'none', 'block');
            gridStyleLiltDisplay === 'none' ? gridlileFonts.innerHTML =  '&#xe601': gridlileFonts.innerHTML = '&#xe743';
            break;
        // 元素定位
        case gridAttribute:
            let gridarrbuteDisplay = getStyle(gridAttBox, 'display', 'none', 'block');
            gridarrbuteDisplay === 'none' ? gridArrfont.innerHTML =  '&#xe601': gridArrfont.innerHTML = '&#xe743';
            break;
        case selectorFont:
            if(selectorFont.value === 'no'){
                selectorBox.style['display'] = 'none';
                gridlilt.style['display']='block';
                gridAttribute.style['display']='block';
                if(GetMoudel.newValue[0]&&GetMoudel.newValue[1]){GetMoudel.newValue[0] = undefined;GetMoudel.newValue[1] = undefined}
                let box = document.querySelectorAll('.lookBox');
                if (box) {
                    for (let i = 0; i < box.length; i++) {
                        box[i].parentNode.removeChild(box[i]);
                    }
                }
            }else{
                selectorBox.style['display'] = 'block';
                gridlilt.style['display']='none';
                gridAttribute.style['display']='none';
                gridstylelite.style['display']='none';
                if(GetMoudel.newValue[2]||GetMoudel.newValue[3]||GetMoudel.newValue[4]||GetMoudel.newValue[5]){
                    for(let i = 2;i<6;i++){
                        GetMoudel.newValue[i] = undefined;
                    }
                }
                let box = document.querySelectorAll('.lookBox');
                if (box) {
                    for (let i = 0; i < box.length; i++) {
                        box[i].parentNode.removeChild(box[i]);
                    }
                }
            }
            break
        default:
            break;
    }

}, false);
(function () {
    // 设置代码显示区域屏幕的大小
    let computedStyle = document.defaultView.getComputedStyle(optionCheckBox, null);
    let textareaHeight = parseInt(computedStyle.height) - 5 + 'px';
    let textareaWidth = computedStyle.width;
    textarea.style.width = textareaWidth;
    textarea.style.height = textareaHeight;
    //设置样式区域的高度
    const optionStyle = document.defaultView.getComputedStyle(optionClick, null);
    let optionHeight = parseInt(optionStyle.height) - 45 + 'px';
    console.log('height', optionHeight)
    observation.style.height = optionHeight;
})();
//更新数据， 后期在引入数据节流或者防抖的函数
class GetMoudel {
    //最新值
    static newValue = {};
    constructor(obj) {
        // 获取节点
        this.$input = document.querySelector(obj.el);
        this.$data = obj.data;
        this.order = obj.order;
        // 收容所
        var ss = {};
        // 绑定事件
        this.add(this.$input, this.$data, ss);
        //事件触发，开始更新最新数据
        this.lister(ss, this.order);
    }
    /**
     *为每一个事件都绑定上处理函数
     *
     * @param {*} val 键
     * @param {*} key 值f
     * @memberof GetMoudel
     */
    add(val, key, ss) {
        //判断值使其不能重复赋值
        let arr = {}
        
        val.addEventListener('click', function (event) {
            if (arr.foo && arr.foo == val.value) return;
            arr.foo = val.value;
            ss.foo = val.value;
        }, false)
    }
    lister(ss, key) {
        Object.defineProperty(ss, 'foo', {
            get(val) {
                return val
            },
            set(val) {
                GetMoudel.newValue[key] = val;
                judgefunc(GetMoudel.newValue);
            }
        })
    }
}
//开始更新数据。
(function () {
    let inputArr = ['.childColumn','.childRow','.cantainer-nums',
    '.childbox-rows','.childbox-columns','.childbox-nums','.rows-spacing','.colomn-spacing',
    '.cantainer-width','.cantainer-height','.childbox-width','.childbox-height',]
    //遍历设置调用更新数据d
    function aotomoudel(arr) {
        let obj = {};
        arr.forEach((key, index) => {
            obj.el = key;
            obj.order = index;
            obj.data = 'click';
            new GetMoudel(obj)
        });
    }
    aotomoudel(inputArr)
})()

// -------------------代码显示----------------------
//判断函数如果满足某种田间才调用某个函数不然不会去调用
function judgefunc(moudel) {
    //是否两个值都变化了，
    if ( typeof moudel[0] ==="string"&& typeof moudel[1] === 'string') {
        //更新用户的数值变化
        callback();
        //调用回调函数创建盒子
        setclass(observation, moudel,0,1)
    }

    if(!!moudel[2]&&moudel[3]&&moudel[4]&&moudel[5] && (parseInt(moudel[2]) >= parseInt(moudel[5]))){
        callback();
        setclass(observation, moudel,3,4,5)
    }

}

//自定义内容
function callback() {
    let cssStayle1 =
        `.father{
    display: grid;
    grid-template-rows: repeat(${GetMoudel.newValue[0]}fr);
    grid-template-columns: repeat(${GetMoudel.newValue[1]}fr);
    `
    let gap1 = 
    `    grid-rap:${GetMoudel.newValue[6]}px,${GetMoudel.newValue[7]}px;`;
    let fahw = 
    `
    height:${GetMoudel.newValue[8]}px;
    width:${GetMoudel.newValue[9]}px;
    `;

    let fad = `
}`

    let child = 
    `
.child{
    background-color: green;
    `   
    let childhw=
    `
    height:${GetMoudel.newValue[10]}px;
    width:${GetMoudel.newValue[11]}px;
    `
    let cssStayle2 =
        `.father{
    display: grid;
    grid-template-rows: repeat(${GetMoudel.newValue[3]}fr);
    grid-template-columns: repeat(${GetMoudel.newValue[4]}fr);
`  
    let str;
    //盒子有值时候
    if(!!GetMoudel.newValue[0]&&GetMoudel.newValue[1]){
        str= cssStayle1 + fad + child + fad;
        if(!!GetMoudel.newValue[6]&&GetMoudel.newValue[7]){
            str = cssStayle1 + gap1+fad + child + fad;
        }
        if(!!GetMoudel.newValue[8]&&GetMoudel.newValue[9]){
            str =  cssStayle1 + gap1+fahw+fad + child + fad;
        }
        if(!!GetMoudel.newValue[10]&&GetMoudel.newValue[11]){
            str =  cssStayle1 + gap1+fahw+fad + child + childhw+fad;
        }
        
    }else{
        str = cssStayle2+fad + child + fad;
        if(!!GetMoudel.newValue[6]&&GetMoudel.newValue[7]){
            str = cssStayle2 + gap1+fad + child + fad;
        }
        if(!!GetMoudel.newValue[8]&&GetMoudel.newValue[9]){
            str = cssStayle2 + gap1+fahw+fad + child + fad;
        }
        if(!!GetMoudel.newValue[10]&&GetMoudel.newValue[11]){
            str = cssStayle2 + gap1+fahw+fad + child + childhw+fad;
        }
    }
    textarea.innerHTML = str;
    
}

function setclass(node, moudel,x,y,z) {
    // node.style.display = 'grid';
    let fragments = document.createDocumentFragment();
    // 创建盒子
    let creatDiv;
    if(moudel[0]&&moudel[1]){ creatDiv =  moudel[0]*moudel[1];}else{ creatDiv =  moudel[z];}
    if (node.childNodes.length) {
        for (let i = 0; i < node.childNodes.length; i++) {
            fragments.appendChild(node.childNodes[i])
        }
    }
    //创造节点
    if (node.childNodes.length < creatDiv) {
        for (let i = 0; i < creatDiv; i++) {
            let div = document.createElement("div");
            div.setAttribute('class', 'lookBox');
            fragments.appendChild(div);

        }
    }
    //设置样式
    boxStyle(observation, moudel)
    node.appendChild(fragments)
    //删除多余节点
    if (node.childNodes.length > creatDiv) {
        let nums = node.childNodes.length - creatDiv;
        for (let i = 0; i < nums; i++) {
            node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
        }
    }
    //样式函数
    function boxStyle(nodechild, moudel) {
        const optionStyle = document.defaultView.getComputedStyle(observation, null);
        let height = parseInt(optionStyle.height);
        let width = parseInt(optionStyle.width);
        let rows = height / moudel[x] + 'px';
        let columns = width / moudel[y] + 'px';
        let strRow = rows, strColums = columns;
        for (let i = 0; i < moudel[x] - 1; i++) {
            strRow += ' ' + rows;
        }
        for (let i = 0; i < moudel[y] - 1; i++) {
            strColums += ' ' + columns
        }
        nodechild.style.gridTemplateRows = strRow;
        nodechild.style.gridTemplateColumns = strColums;
    }
}